<template>
	<view class="wrap">
		<liuyuno-tabs
			v-if="dimensions.length > 0 && evaluateType === 'enterprise'"
			:tabData="dimensions"
			:activeIndex="dimensionIndex"
			:config="defaultConfig"
			@tabClick="onClickItem($event, '')" />
		
		<view v-if="evaluateType === 'enterprise'" class="main">
			<view v-for="(item, index) in dimensions" :key="index">
				<assess-evaluate-item v-show="dimensionIndex === index" ref="evaluateItem" :dimensionIndex="dimensionIndex" :index="index" :evaluateType="evaluateType" :birthday="birthday" :dimensionId="dimensions[index].id"></assess-evaluate-item>
			</view>
		</view>
		<view v-else class="main" :style="{height: contentHeight + 'px'}">
			<assess-evaluate-item v-if="dimensions.length > 0 && evaluateType === 'pro'" ref="evaluateItem" :dimensionIndex="dimensionIndex" :index="0" :evaluateType="evaluateType" :birthday="birthday" :dimensionId="dimensions[dimensionIndex].id"></assess-evaluate-item>
		</view>

		<view v-if="dimensions.length > 0" class="assess-fixed-view" @click="beginClick">
			<view class="action-view">
				<text class="title">{{title}}</text>
				<text class="desc">{{actionTitle}}{{actionDesc}}</text>
			</view>
			<view class="safe-area-view"></view>
		</view>
	</view>
</template>

<script>
	import AssessEvaluateItem from  '../components/assess-evaluate-item.vue'
	import liuyunoTabs from "../components/liuyuno-tabs/liuyuno-tabs.vue";
	import utils from '@/utils/utils.js'
	export default {
		components: {
			AssessEvaluateItem,
			liuyunoTabs
		},
		data() {
			return {
				//pro
				//enterprise
				evaluateType: 'pro',
				birthday: '',
				dimensionIndex: -1,
				dimensions: [
					
				],
				answers: [],

				color: getApp().globalData.themeColor,

				defaultConfig: {
					// 要显示的key
					key: 'name',
					// 字体大小 rpx
					fontSize: 36,
					// 字体颜色
					color: '#313131',
					// 激活字体颜色
					activeColor: getApp().globalData.themeColor,
					// item宽度 0为自动
					itemWidth: 0,
					// 下划线左右边距，文字宽度加边距，如果设置了itemWidth则为itemWidth加边距 rpx
					underLinePadding: 10,
					// 下划线宽度 rpx  注意：设置了此值 underLinePadding 失效
					underLineWidth: 0,
					// 下划线高度 rpx
					underLineHeight: 4,
					// 下划线颜色
					underLineColor: getApp().globalData.themeColor,
				},
				
				contentHeight: 44,
			}
		},
		computed: {
			title() {
				if (this.evaluateType === 'pro') {
					if (this.dimensionIndex !== -1) {
						return this.dimensions[this.dimensionIndex].name;
						// return this.sectionToChinese(this.dimensions[this.dimensionIndex].code) +
						// 	'、' + this.dimensions[this.dimensionIndex].name;
					} else {
						return '测评能区'
					}
				} else {
					return '确定';
				}
			},
			
			actionTitle() {
				if (this.evaluateType === 'pro') {
					if (this.dimensionIndex === this.dimensions.length - 1) {
						return '提交测评';
					}
					return '进入下一个能区';
				}
				return '';
			}, 
			
			actionDesc() {
				if (this.evaluateType === 'pro') {
					if (this.dimensionIndex !== -1) {
						if (this.dimensionIndex < this.dimensions.length - 1) {
							return `(${this.dimensions[this.dimensionIndex + 1].name})`
						}else {
							return '';
						}
					} 
				}
				return '';
			}
		},
		onLoad(option) {
			console.log(option)
			let data = option.query.data;
			console.log(data);
			this.params = JSON.parse(data);
			this.birthday = this.params.birthday;
			this.evaluateType = this.params.evaluateType;
			this.skipWarningDiemnsion = this.params.skipWarningDiemnsion;
			this.startTime = new Date();

			this.getFullDimensions();
			
			wx.getSystemInfo({
			  success: res => {
				  console.log(res);
				  let bottomHeight = uni.upx2px(120);
				  let safeHeight = res.screenHeight - res.safeArea.bottom;
				  if (this.evaluateType === 'enterprise') {
					  let topHeight = uni.upx2px(90);
					  this.contentHeight = res.windowHeight - bottomHeight - safeHeight - topHeight;
				  } else {
					  this.contentHeight = res.windowHeight - bottomHeight - safeHeight;
				  }
			  }
			})
		},
		methods: {
			onClickItem(index, name) {
				this.dimensionIndex = index;
				console.log(this.dimensionIndex);
			},
			beginClick(){
				
				if (this.evaluateType === 'pro') {
					let isFinish = this.$refs['evaluateItem'].evaluateFinish();
					console.log(isFinish);
					if (!isFinish) {
						return;
					}
					let data = this.$refs['evaluateItem'].getVal();
					this.answers = this.answers.concat(data);
					console.log(this.answers);
					if (this.dimensionIndex !== this.dimensions.length - 1) {
						this.dimensionIndex = this.dimensionIndex + 1;
						console.log(this.dimensionIndex);
					} else {
						this.addEvaluateImmediately();
					}
				} else {
					this.answers = [];
					for (let index in this.dimensions) {
						let isFinish = this.$refs.evaluateItem[index].hasMonthPass();
						if (!isFinish) {
							uni.showToast({
								icon: 'none',
								title: `${this.dimensions[index].name}能区最小测查月龄需全部通过`
							})
							return;
						}
						let data = this.$refs.evaluateItem[index].getVal();
						this.answers = this.answers.concat(data);
					}
					this.addEvaluateImmediately();
				}
			},
			
			getFullDimensions() {
				this.$http.request({
					url: '/eapi/operator/full_dimensions',
					method: 'POST',
					params: {
						skipWarningDiemnsion: this.skipWarningDiemnsion,
					}
				}).then(res => {
					console.log(res);
					this.dimensions = res.data;
					this.dimensionIndex = 0;
					for (var index in res.data) {
						this.items[index] = res.data[index].name;
					}
					console.log(this.items);
				}).catch(err => {
				});
			},
			
			addEvaluateImmediately() {
				uni.showLoading({})
				this.endTime = new Date();
				let duration = (this.endTime.getTime() - this.startTime.getTime())/1000;   //相差秒数
				this.params.answers = JSON.stringify(this.answers);
				this.params.duration = parseInt(duration);
				console.log(this.params);
				this.$http.post(
						'/eapi/operator/add_evaluate_immediately', this.params, {
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
						})
					.then(res => {
						uni.hideLoading();
						console.log(res);
						if (res.code === '000000') {
							uni.redirectTo({
								url: '/pages_evaluate/evaluate/evaluate-result?evaluateRecordId=' + res.data.id + '&isShared=false'
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
					.catch(err => {
						uni.hideLoading();
						console.log(err);
					});
			},

			sectionToChinese(s) {
				return utils.sectionToChinese(s)
			},
		}
	}
</script>

<style lang="scss">
	uni-page-body,
	#app {
		height: 100%;
	}
	
	page {
		height: 100%;
		background-color: #F7F7F7;
	}

	.wrap{
		display:flex;
		flex-direction:column;
		width:100%;
		height: 100%;
		background: #F7F7F7;
	}
	.main{
		display: flex;
		flex-direction: column;
	}
	
	.dimension-title{
		position: fixed;
		top: 0rpx;
		width: 100%;
		height: 88rpx;
		background: $app-main-color;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
		
		font-size: 34rpx;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 48rpx;
	}
	
	.contet {
		display: flex;
		flex-direction: column;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #F7F7F7;
		padding-bottom: 160rpx;
		flex-grow:1;
	}

	.tabs {
		background-color: #fff;
	}
	
	.assess-fixed-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	
		background: rgba(255, 171, 0, 1);
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
		opacity: 1;
	
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: bold;

		.action-view{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 120rpx;
			
			.title{
				font-size: 36rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 34rpx;
			}
			
			.desc{
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 34rpx;
				margin-top: 10rpx;
			}
		}
	}

</style>
